
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>3dPhoto</title>

    <style>
                * {
            margin: 0;
            padding: 0;
        }

        #none {
            text-decoration: none;
        }

        .box {
            width: 253px;
            height: 352px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            transform-style: preserve-3d;
            animation: im 20s linear infinite;
        }

        .box img {
            width: 100%;
            height: 100%;
            position: absolute;
            border: 5px solid azure;
            transition: all 0.3s linear;
            opacity: 0;
        }

        .box img.active {
            opacity: 1;
            transform: scale(1.5);
        }

        @keyframes im {
            0% {
                transform: rotateY(0deg) rotateX(10deg);
            }

            25% {
                transform: rotateY(90deg) rotateX(-10deg);
            }

            50% {
                transform: rotateY(180deg) rotateX(10deg);
            }

            75% {
                transform: rotateY(270deg) rotateX(-10deg);
            }

            100% {
                transform: rotateY(360deg) rotateX(10deg);
            }
        }
        /*10张图片3d变换*/
	.box img:nth-child(1) {
		transform: rotateY(0deg) translateZ(600px);
		backface-visibility: visible;
	}

	.box img:nth-child(2) {
		transform: rotateY(36deg) translateZ(600px);
		backface-visibility: visible;
	}

	.box img:nth-child(3) {
		transform: rotateY(72deg) translateZ(600px);
		backface-visibility: visible;
	}

	.box img:nth-child(4) {
		transform: rotateY(108deg) translateZ(600px);
		backface-visibility: visible;
	}

	.box img:nth-child(5) {
		transform: rotateY(144deg) translateZ(600px);
		backface-visibility: visible;
	}

	.box img:nth-child(6) {
		transform: rotateY(180deg) translateZ(600px);
		backface-visibility: visible;
	}

	.box img:nth-child(7) {
		transform: rotateY(216deg) translateZ(600px);
		backface-visibility: visible;
	}

	.box img:nth-child(8) {
		transform: rotateY(252deg) translateZ(600px);
		backface-visibility: visible;
	}

	.box img:nth-child(9) {
		transform: rotateY(288deg) translateZ(600px);
		backface-visibility: visible;
	}

	.box img:nth-child(10) {
		transform: rotateY(324deg) translateZ(600px);
		backface-visibility: visible;
	}
    

        .box img {
            backface-visibility: visible;
            transition: all 3s linear;
        }

        .box img.active {
            transform: scale(1.3) translateZ(600px);
            z-index: 1;
            backface-visibility: visible;
        }
    </style>
</head>
<body background="img/wbg.png">

    <div class="show">

        <div class="box">
            <img src="img/wjh10.jpg" alt="Image 1" onclick="toggleImage(this)">
            <img src="img/wjh2.jpg" alt="Image 2" onclick="toggleImage(this)">
            <img src="img/wjh1.jpg" alt="Image 3" onclick="toggleImage(this)">
            <img src="img/wjh3.jpg" alt="Image 4" onclick="toggleImage(this)">
            <img src="img/wjh4.jpg" alt="Image 5" onclick="toggleImage(this)">
            <img src="img/wjh5.jpg" alt="Image 6" onclick="toggleImage(this)">
            <img src="img/wjh6.jpg" alt="Image 7" onclick="toggleImage(this)">
            <img src="img/wjh7.jpg" alt="Image 8" onclick="toggleImage(this)">
            <img src="img/wjh8.jpg" alt="Image 9" onclick="toggleImage(this)">
            <img src="img/wjh9.jpg" alt="Image 10" onclick="toggleImage(this)">

        </div>
    </div>

    <script>
        function toggleImage(imgElement) {
            // 获取所有图片元素
            const images = document.querySelectorAll('.box img');

            // 遍历所有图片元素，移除 active 类
            for (let i = 0; i < images.length; i++) {
                images[i].classList.remove('active');
            }

            // 为当前点击的图片元素添加 active 类
            imgElement.classList.add('active');
        }
    </script>

</body>

</html>
